<template>
  <div style="padding: 24px 36px 0 36px">
    <dataCard
      width="1848"
      height="404"
      title="训练员授课管理情况"
      v-loading="card1_loading"
    >
      <div class="card1 flex">
        <!-- 卡片 -->
        <div class="cards flex">
          <div class="item" style="margin: 32px 128px 0 78px">
            <img
              class="icon"
              src="@/assets/images/screen/order/icon1.png"
              alt=""
            />
            <div class="value">￥{{ card1_totalAmount.totalAmount || 0 }}</div>
            <div class="label">订单总收入</div>
          </div>
        </div>
        <!-- 近12月订单新增数据 -->
        <div class="chart-box">
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              近12月订单新增数据
            </div>
          </div>
          <div class="chart" ref="chart"></div>
        </div>
      </div>
    </dataCard>

    <dataCard
      width="1848"
      height="525"
      title="订单授权数据"
      style="margin-top: 24px"
    >
      <div class="card2">
        <div style="padding-top: 36px">
          <order_orderAuthorizationData
            :active="activeName"
          ></order_orderAuthorizationData>
        </div>
      </div>
    </dataCard>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
import dataCard from "./components/dataCard";
import order_orderAuthorizationData from "./components/order_orderAuthorizationData";
import {
  totalAmount,
  newAddOrderStatistics,
  orderList,
} from "@/api/screen/order";

export default {
  components: {
    dataCard,
    order_orderAuthorizationData,
  },
  data() {
    return {
      activeName: 0,
      card1_totalAmount: {},
      card1_newAddOrderStatistics: [],
      card1_loading: false,
    };
  },
  mounted() {
    this.getCard1_data();
  },
  methods: {
    async getCard1_data() {
      this.card1_loading = true;

      try {
        const [api1Data, api2Data] = await Promise.all([
          totalAmount(),
          newAddOrderStatistics({
            pageNum: 1,
            pageSize: 10,
          }),
        ]);
        this.card1_totalAmount = api1Data.data;
        this.card1_newAddOrderStatistics = api2Data.data;
        this.initCard1_Chart(this.card1_newAddOrderStatistics);
      } finally {
        this.card1_loading = false;
      }
    },
    initCard1_Chart(list) {
      const nys = list.map((item) => {
        return item.ny;
      });
      const amounts = list.map((item) => {
        return item.amount;
      });
      const orderNums = list.map((item) => {
        return item.orderNum;
      });
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const colors = ["#ff8200", "#ab83ec"];
      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "80px",
          right: "120px",
          bottom: "55px",
        },
        legend: {
          data: ["订单数量", "订单收入"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: nys,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
            // axisLabel: {
            //   formatter: "{value} ml",
            // },
          },
          {
            type: "value",
            name: "金额",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "订单数量",
            type: "bar",
            barWidth: "12px", // 设置柱状图的宽度
            data: orderNums,
            itemStyle: {
              // borderRadius: 10, // 统一设置四个角的圆角大小
              borderRadius: [6, 6, 0, 0], //（顺时针左上，右上，右下，左下）
            },
          },
          {
            name: "订单收入",
            type: "line",
            yAxisIndex: 1,
            data: amounts,
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.chart-box {
  padding-top: 16px;
  .chart {
    width: 1230px;
    height: 300px;
  }
}
.ranktitle {
  .txt {
    img {
      margin-right: 3px;
      width: 8px;
      height: 11px;
    }
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }
  .more {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    line-height: 22px;
    font-style: normal;
  }
}
.card1 {
  .cards {
    .item {
      width: 360px;
      height: 258px;
      background: #ffffff;
      box-shadow: 0px 11px 24px -11px rgba(0, 0, 0, 0.23);
      border-radius: 8px;
      border: 2px solid #ffffff;
      .icon {
        margin: 40px 144px 0 144px;
        width: 72px;
        height: 72px;
      }
      .value {
        margin-top: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40px;
        color: #ff6801;
        line-height: 56px;
        text-align: center;
        font-style: normal;
      }
      .label {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
</style>